<template>
	<view class="store">
		<!-- position: fixed; -->
		<view class=""
			style="width: 100%;background: url(https://sz.vvv5g.com/assets/img/wxImg/store_top.png);background-size: 100% auto;">
			<view class="" style="background: #fff;">
				<view class="" :style="'height:'+navBarInfo.statusBarHeight+'px;'">

				</view>
				<view class="flex align-center justify-between topFixed1"
					:style="'height:'+navBarInfo.navBarHeight+'px;width:'+navBarInfo.navBarWidth+'px;'">
					<view class="" style="font-size: 0;margin-left: 40rpx;">
						<image @click="goback" style="width: 48rpx;height: 48rpx;" src="../../static/left_jian_back.png"
							mode="">
						</image>
					</view>
					<view @click="onLocation" class="flex flex-1 align-center" style="">
						<view style="font-size: 0;">
							<image style="width: 42rpx;height: 42rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx;color: #333333;width: 88rpx;">
							{{positionText?positionText:address?address:'请选择'}}
						</view>
						<view style="font-size: 0;">
							<image style="width: 22rpx;height: 22rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png" mode=""></image>
						</view>
					</view>
					<!-- 同城国内选项卡 -->
					<view class="text-overflow1 flex align-center justify-center " style="font-size: 32rpx;color: #fff;"
						:style="'width:'+navBarInfo.navBarContentWidth+'px;'">

						<view class="flex align-center" style="background: #f4f4f4;border-radius: 32rpx;">

							<view @click="changeRange(0)"
								style="padding: 12rpx 30rpx;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==0?'color:#ffffff;background:#333;':''">
								同城
							</view>
							<view @click="changeRange(1)"
								style="padding: 12rpx 30rpx;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==1?'color:#ffffff;background:#333;':''">
								全国
							</view>
						</view>
					</view>
				</view>


				<!-- 第一切换卡 -->
				<!-- 32rpx 32rpx 25rpx 32rpx -->
				<view class="flex topFixed" style="margin: 0 32rpx;">
					<scroll-view style="white-space: nowrap;" scroll-with-animation scroll-x="true"
						:scroll-into-view="'t' + tid">
						<view class="" style="margin-right: 6rpx;height: 200rpx;padding: 0 20rpx 0 10rpx;">
							<view v-for="(item , index) in bigtabArr" :key="item"
								style="flex-shrink:0;display: inline-block;margin-right: 16rpx;"
								@click="selectBigtab(index)" :class="flag == index?'bigtab active':'bigtab'">
								<div style="width: 126rpx; height: 104rpx;margin: 0 auto;">
									<image style="width: 100%;height: 100%;" :src="item.src" mode="aspectFill"></image>
								</div>
								<div style="text-align: center;" :class="flag == index?'active_font':'type'">
									{{item.name}}
								</div>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="search_box" v-if="flag==1||flag==2">
					<image src="@/static/search1.png"
						style="width: 32rpx;height: 32rpx;margin-left: 40rpx;margin-top: 16rpx;"></image>
					<input type="text" v-model="searchVal" class="searchInput"
						:placeholder="flag==1?'请输入店铺名称':'请输入老师名称'" @confirm="handelSearch" confirm-type="search" />
				</view>
				<!-- 第二切换卡 -->
				<view :class="barisTrue?'xiding':'' ">
					<view v-if="barisTrue" class="" :style="'height:'+navBarInfo.statusBarHeight+'px;'">

					</view>
					<view v-show="flag == 0" class="flex" style="margin: 32rpx 32rpx 0rpx 32rpx;">
						<scroll-view class="scrollnobar" style="white-space: nowrap;font-size: 0;" scroll-with-animation
							scroll-x="true" :scroll-into-view="'t' + classid0">
							<view style="display: inline-block;margin-right: 52rpx;" v-for="(item,index) in navsList"
								:key="index" @click="onActive0(item.id)">
								<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
									<view class="flex align-center" :style="classid0 == item.id?'font-weight:700;':''"
										style="font-size: 26rpx;color: #333;">
										{{item.name}}
									</view>
									<view class="" v-if="classid0 == item.id"
										style="width: 36rpx;height: 6rpx;background: #fff;margin-top: 12rpx;">

									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view v-show="flag == 1" class="flex" style="margin: 32rpx 32rpx 0rpx 32rpx;">
						<scroll-view class="scrollnobar" style="white-space: nowrap;font-size: 0;" scroll-with-animation
							scroll-x="true" :scroll-into-view="'t' + classid1">
							<view style="display: inline-block;margin-right: 52rpx;"
								v-for="(item,index) in storeNavList" :key="index" @click="onActive1(item.id)">
								<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
									<view class="flex align-center" :style="classid1 == item.id?'font-weight:700;':''"
										style="font-size: 26rpx;color: #333;">
										{{item.name}}
									</view>
									<view class="" v-if="sclassid1 == item.id"
										style="width: 36rpx;height: 6rpx;background: #fff;margin-top: 12rpx;">

									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view v-show="flag == 2" class="flex" style="margin: 32rpx 32rpx 0rpx 32rpx;">
						<scroll-view class="scrollnobar" style="white-space: nowrap;font-size: 0;" scroll-with-animation
							scroll-x="true" :scroll-into-view="'t' + classid2">
							<view style="display: inline-block;margin-right: 52rpx;" v-for="(item,index) in shopNavlist"
								:key="index" @click="change1(item.id,index)">
								<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
									<view class="flex align-center" :style="classid2 == item.id?'font-weight:700;':''"
										style="font-size: 26rpx;color: #333;">
										{{item.name}}
									</view>
									<view class="" v-if="classid2 == item.id"
										style="width: 36rpx;height: 6rpx;background: #fff;margin-top: 12rpx;">

									</view>
								</view>
							</view>
						</scroll-view>

					</view>
					<view v-show="flag == 3" class="flex" style="margin: 32rpx 32rpx 0rpx 32rpx;">
						<scroll-view class="scrollnobar" style="white-space: nowrap;font-size: 0;" scroll-with-animation
							scroll-x="true" :scroll-into-view="'t' + classid3">
							<view style="display: inline-block;margin-right: 52rpx;" v-for="(item,index) in shopNavlist"
								:key="index" @click="change2(item.id)">
								<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
									<view class="flex align-center" :style="classid3 == item.id?'font-weight:700;':''"
										style="font-size: 26rpx;color: #333;">
										{{item.name}}
									</view>
									<view class="" v-if="classid3 == item.id"
										style="width: 36rpx;height: 6rpx;background: #fff;margin-top: 12rpx;">
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

					<view v-show="flag == 4" class="flex" style="margin: 32rpx 32rpx 0rpx 32rpx;">
						<scroll-view class="scrollnobar" style="white-space: nowrap;font-size: 0;" scroll-with-animation
							scroll-x="true" :scroll-into-view="'t' + classid4">
							<view style="display: inline-block;margin-right: 52rpx;" v-for="(item,index) in shopNavlist"
								:key="index" @click="change3(item.id)">
								<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
									<view class="flex align-center" :style="classid4 == item.id?'font-weight:700;':''"
										style="font-size: 26rpx;color: #333;">
										{{item.name}}
									</view>
									<view class="" v-if="classid4 == item.id"
										style="width: 36rpx;height: 6rpx;background: #fff;margin-top: 12rpx;">

									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 摄影师切换卡 -->

					<view v-show="flag ==2" class="teacher flex justify-center align-center" style="margin-top: 20rpx;">
						<view @click="tabTeacher(1)" :class="teacherType==1? 'option active_option': 'option'"
							style="margin-right: 44rpx;">
							摄影师
						</view>
						<view @click="tabTeacher(2)" :class="teacherType==2? 'option active_option': 'option'"
							class="option">
							造型师
						</view>
					</view>
					<!-- 第四选项卡 -->
					<view v-show="flag == 0" class="flex align-center justify-around"
						style="padding-top: 32rpx;padding-bottom: 28rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;">
						<view class="flex align-center"
							:style="screenIndex==index?'color: #333;font-style: Heavy;':'color: #999'"
							style="font-size: 24rpx;" @click="onSort(index)" v-for="(item,index) in screenList"
							:key="index">
							<view :class="sortType0==index?'active_three':'three_type'" style="margin-right: 10rpx;">
								{{item.name}}
							</view>
							<view class="four_tab">
								<image style="width: 100%;height: 100%;"
									:src="sortType0 == index? item.active_src:item.src" mode=""></image>
							</view>
						</view>
					</view>
					<view v-show="flag == 1" class="flex align-center justify-around"
						style="padding-top: 32rpx;padding-bottom: 28rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;">
						<view class="flex align-center"
							:style="sortType1==index?'color: #333;font-style: Heavy;':'color: #999'"
							style="font-size: 24rpx;" @click="screenActive(index)" v-for="(item,index) in screenList2"
							:key="index">
							<view :class="sortType1==index?'active_three':'three_type'" style="margin-right: 10rpx;">
								{{item.name}}
							</view>
							<view style="width: 24rpx;height: 24rpx; ">
								<image style="width: 100%;height: 100%;"
									:src="sortType1 == index? item.active_src:item.src" mode=""></image>
							</view>
						</view>
					</view>
					<view v-show="flag == 2" class="flex align-center justify-around"
						style="padding-top: 32rpx;padding-bottom: 28rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;">
						<view class="flex align-center"
							:style="sortType2==index?'color: #333;font-style: Heavy;':'color: #999'"
							style="font-size: 24rpx;" v-for="(item,index) in screenList3" :key="index"
							@click="changesortType2(index)">
							<view :class="sortType2==index?'active_three':'three_type'" style="margin-right: 10rpx;">
								{{item.name}}
							</view>
							<view style="width: 24rpx;height: 24rpx; ">
								<image style="width: 100%;height: 100%;"
									:src="sortType2 == index? item.active_src:item.src" mode=""></image>
							</view>
						</view>
					</view>
					<view v-show="flag == 3" class="flex align-center justify-evenly"
						style="padding-top: 32rpx;padding-bottom: 28rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;">
						<view class="flex align-center"
							:style="sortType3==index?'color: #333;font-style: Heavy;':'color: #999'"
							style="font-size: 24rpx;" v-for="(item,index) in screenList4" @click="selectThree3(index)"
							:key="index">
							<view :class="sortType3==index?'active_three':'three_type'" style="margin-right: 10rpx;">
								{{item.name}}
							</view>
							<view style="width: 24rpx;height: 24rpx; ">
								<image style="width: 100%;height: 100%;"
									:src="sortType3 == index? item.active_src:item.src" mode=""></image>
							</view>
						</view>
					</view>
					<view v-show="flag == 4" class="flex align-center justify-evenly"
						style="padding-top: 32rpx;padding-bottom: 28rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;">
						<view class="flex align-center"
							:style="sortType4==index?'color: #333;font-style: Heavy;':'color: #999'"
							style="font-size: 24rpx;" v-for="(item,index) in screenList4" @click="selectThree4(index)"
							:key="index">
							<view :class="sortType4==index?'active_three':'three_type'" style="margin-right: 10rpx;">
								{{item.name}}
							</view>
							<view style="width: 24rpx;height: 24rpx; ">
								<image style="width: 100%;height: 100%;"
									:src="sortType4 == index? item.active_src:item.src" mode=""></image>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="" v-if="barisTrue" :style="'height:'+padding+'px;'">

		</view>
		<!-- 列表 -->
		<zero-waterfall v-show="flag == 0" :list="goodsList" @clear="clearData" :type="type" :status="status0">
		</zero-waterfall>
		<view v-if="flag==1" v-for="(item,index) in storeList" :key="index"
			@click="onGoods(item.is_photography,item.id,item.shopname)"
			style="padding: 28rpx;border-radius: 16rpx;background: #fff;margin: 20rpx 28rpx;">
			<view class="flex align-center">
				<view class="flex-1 flex align-center">
					<view class="" style="font-size: 0;">
						<image style="width: 128rpx;height: 128rpx; border-radius: 20rpx;" :src="item.avatar_url"
							mode=""></image>
					</view>
					<view class="flex flex-column justify-between" style="margin-left: 20rpx;height: 128rpx;">
						<view class="text-overflow1" style="font-size: 700;font-size: 28rpx;color: #333;">
							{{item.shopname}}
						</view>
						<view class="flex align-center" style="font-size: 20rpx;color: #333;">
							商品{{item.goods}}
							<view style="height: 12rpx;width: 4rpx;background: #e0e0e0;margin: 0 20rpx;">

							</view>访客{{item.views}}
						</view>
						<view class="flex align-center" @click.stop="getOpenLoaction(item.latitude,item.longitude)">
							<view class="" style="font-size: 0;margin-right: 10rpx;">
								<image style="width: 20rpx;height: 20rpx;" src="../../static/store/dingwei.png" mode="">
								</image>
							</view>
							<view class="text-overflow1" style="color: #E29D48;font-size: 20rpx;">
								距离{{item.distance}} {{item.city}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center" style="margin-left: 40rpx;margin-top: 50rpx;">
					<view @click.stop="goPinglun(item.id)" class="flex flex-column align-center">
						<view class="" style="font-size: 0;">
							<image style="width: 32rpx;height: 32rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/pinglun.png" mode=""></image>
						</view>
						<view class="" style="font-size: 18rpx;color: #333;margin-top: 6rpx;">
							评论
						</view>
					</view>
					<view style="height: 20rpx;width: 4rpx;background: #e0e0e0;margin: 0 20rpx;">

					</view>
					<view @click.stop="onPhone(item.mobile)" class="flex flex-column align-center">
						<view style="font-size: 0;">
							<image style="width: 32rpx;height: 32rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/dianhua.png" mode=""></image>
						</view>
						<view style="font-size: 18rpx;color: #333;margin-top: 6rpx;">
							电话
						</view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-between"
				style="margin-top: 20rpx;background: linear-gradient(90deg, #F4F5F9 0%, rgba(244, 245, 249, 0) 100%);border-radius: 12rpx;font-size: 20rpx;color: #999;padding-left: 20rpx;height: 52rpx;">
				<view class="flex-1 text-overflow1">
					擅长：{{item.description}}
				</view>
				<view class="" style="font-size: 0;">
					<image style="width: 6rpx;height: 12rpx;" src="../../static/personal/right_jian.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 老师列表 -->
		<view v-if="flag == 2" class="teacher_box">
			<zero-waterfall :list="shoplist" :islike="true" type="5" styleType="4" :status="status2">
			</zero-waterfall>
			<view class="poskl" @click="goLick">
				<view class="xin"></view>
				喜欢
			</view>
			<!-- <view style="width: 100%;height: 130rpx;"></view> -->
		</view>
		<!-- 样片列表 -->
		<view v-if="flag == 3" class="teacher_box">
			<zero-waterfall :list="printList" type="3" :islike="true" :status="status3" styleType="2">
			</zero-waterfall>
			<!-- <view style="width: 100%;height: 130rpx;"></view> -->
		</view>
		<!-- 客片列表 -->
		<view v-if="flag == 4" class="teacher_box">
			<zero-waterfall :list="guestList" type="3" :islike="true" :status="status4" styleType="2">
			</zero-waterfall>
			<!-- <view style="width: 100%;height: 130rpx;"></view> -->
		</view>
	</view>
</template>

<script>

	export default {
		computed: {
			address2() {
				return this.$store.state.getLocation.address2
			},
			positionText() {
				return this.$store.state.getLocation.positionText
			},
			selectedAddress() {
				return this.$store.state.getLocation.selectedAddress
			},
			//选择位置经纬度
			lat() {
				return this.$store.state.getLocation.lat
			},
			lng() {
				return this.$store.state.getLocation.lng
			},
			rangeObj() {
				return this.$store.state.getLocation.rangeObj
			},
		},
		data() {
			return {
				searchVal: '',
				address: '',
				// 门店参数
				goodsParams: {
					navIndex: 0,
					listsIndex: 0,
					priceType: true,
					new_area: ''
				},
				// 吸顶
				barisTrue: null,

				bigtabArr: [{
						'src': '../../static/Group 3757.png',
						'name': '套系',
					},
					{
						'src': '../../static/Group 3756.png',
						'name': '店铺'
					},
					{
						'src': '../../static/Group 3755.png',
						'name': '老师'
					},
					{
						'src': '../../static/Group 3753.png',
						'name': '样片'
					},
					{
						'src': '../../static/Group 3753.png',
						'name': '客片'
					}
				],
				// 第三分类标识
				flag_three: 0,
				// 商品列表

				// 摄影师切换卡标识
				flagOption: 1,
				// star标识
				flagStar: false,
				navIndex: 0,
				screenIndex: 0,
				status: 0,
				tid: 1,
				keyWords: '',
				show: false,
				// 门店
				screenList: [
					{
						name: '爆款',
						src: '../../static/Group 942.png',
						active_src: '../../static/Group 3815.png'
					},
					{
						name: '最新',
						src: '../../static/Group 121.png',
						active_src: '../../static/Group 3817.png'
					},
					{
						name: '价格',
						src: '../../static/Group 122.png',
						active_src: '../../static/Group 3814.png'
					},
					{
						name: '好评',
						src: '../../static/Group 941.png',
						active_src: '../../static/Group 3816.png'
					}
				],
				screenList2: [
					{
						name: '综合',
						src: '../../static/Frame.png',
						active_src: '../../static/Frame-1.png'
					},
					{
						name: '销量',
						src: '../../static/Frame-2.png',
						active_src: '../../static/Frame-3.png'
					},
					{
						name: '距离',
						src: '../../static/Group 3818.png',
						active_src: '../../static/Group 3819.png'
					},
					{
						name: '口碑',
						src: '../../static/Frame-6.png',
						active_src: '../../static/Frame-7.png'
					}
				],
				screenList3: [
					{
						name: '综合',
						src: '../../static/Frame.png',
						active_src: '../../static/Frame-1.png'
					},
					{
						name: '服务量',
						src: '../../static/Frame-4.png',
						active_src: '../../static/Frame-5.png'
					},
					{
						name: '距离',
						src: '../../static/Group 3818.png',
						active_src: '../../static/Group 3819.png'
					},
					{
						name: '资历',
						src: '../../static/Frame-8.png',
						active_src: '../../static/Frame-9.png'
					},
					{
						name: '好评',
						src: '../../static/Group 941.png',
						active_src: '../../static/Group 3816.png'
					}
				],
				screenList4: [
					{
						name: '综合',
						src: '../../static/Frame.png',
						active_src: '../../static/Frame-1.png'
					},
					{
						name: '最新',
						src: '../../static/Group 121.png',
						active_src: '../../static/Group 3817.png'
					},
					{
						name: '人气',
						src: '../../static/Group 942.png',
						active_src: '../../static/Group 3815.png'
					},
				],

				longitude: '',
				latitude: '',
				statusbarHeight: 0,
				navBarInfo: {},
				topFixedHeight: 0,
				topFixedHeight1: 0,
				padding: 0,
				rangeIndex: 1, //0 同城 1 全国
				// 吸顶标识
				// 页面参数
				type: 1,
				index: 0,
				totalNum: '',
				page: 1,
				listsIndex: 0,
				// 老师参数
				teacherParams: {
					col: 0,
					page: 1,
					shop_id: 4,
					type: 1,
					user_id: 65,
					wedding_id: 0,
					status: 0,
					checkidIndex: 0,
					order: 0,
					flag_three: 0,
					navIndex: 0,
					new_area: ''
				},


				printNavList: [],
				printParams: {
					status: 0,
					page: 1,
					shop_id: 4,
					show_type: 3,
					checkd: 0,
					checkid: 0,
					user_id: 65,
					checkds: 0,
					checkda: 1,
					work_id: 0,
					checkidIndex: 0,
					flag_three: 0,
					new_area: '',
					sort: 0,
				},
				guestList: [],
				guestNavList: [],
				guestParams: {
					status: 0,
					page: 1,
					shop_id: 4,
					show_type: 3,
					checkd: 0,
					checkid: 0,
					user_id: 65,
					checkds: 0,
					checkda: 2,
					work_id: 0,
					checkidIndex: 0,
					flag_three: 0,
					new_area: '',
					sort: 0,
				},
				// 第一个分类标识
				flag: 0,
				// 套系
				navsList: [],
				goodsList: [],
				classid0: 0,
				sortType0: 0,
				page0: 1,
				last_page0: 0,
				order0: false,
				status0: 0,
				// 门店
				storeNavList: [],
				storeList: [],
				classid1: '',
				sortType1: 0,
				page1: 1,
				last_page1: 0,
				order1: false,
				//老师
				shopNavlist: [],
				shoplist: [],
				classid2: '',
				teacherType: 1,
				sortType2: 0,
				status2: 0,
				page2: 1,
				last_page2: 0,
				order2: false,
				//样片
				printList: [],
				classid3: '',
				sortType3: 0,
				status3: 0,
				page3: 1,
				last_page3: 0,
				order3: false,
				//客片
				printList: [],
				classid4: '',
				sortType4: 0,
				status4: 0,
				page4: 1,
				last_page4: 0,
				order4: false,
				keyWords: ''
			}
		},
		onShow() {
			this.address = '定位中'
			this.$getLocation().then(res => {
				this.$request({
					url: 'common/getLocation',
					data: {
						lat: res.latitude,
						lng: res.longitude
					}
				}).then(jes => {
					this.address = jes.data.data.address_component.city
				})
			})
		},
		onLoad() {
			// 获取导航栏
			// 套系
			this.getNavsList();
			this.changeRange(this.rangeObj.wedding);
			// 门店
			this.getNavsListStore();
			//老师
			this.getlei();
			this.navBarInfo = this.$navBarInfo;
			let that = this
			const sysres = uni.getSystemInfoSync()
			that.statusbarHeight = sysres.statusBarHeight
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.topFixed').boundingClientRect(data => {
					this.topFixedHeight = data.height;
				}).exec();
				query.select('.topFixed1').boundingClientRect(data => {
					this.topFixedHeight1 = data.height;
				}).exec()
				this.padding = this.topFixedHeight + this.topFixedHeight1
			}, 300)
		},
		onPageScroll(e) {
			if (e.scrollTop > this.topFixedHeight + this.topFixedHeight1) {
				this.barisTrue = true
			} else {
				this.barisTrue = false
			}
		},
		onReachBottom() {
			if (this.flag == 0) {
				if (this.page0 >= this.last_page0) {
					this.$wanlshop.msg('我是有底线的!')
				} else {
					this.status = 0
					this.page0++
					this.getListGoods();
				}
			}
			if (this.flag == 1) {
				if (this.page1 >= this.last_page1) {
					this.$wanlshop.msg('我是有底线的!')
				} else {
					this.page1++
					this.getListGoods();
				}
			}
			if (this.flag == 2) {
				if (this.page2 >= this.last_page2) {
					this.$wanlshop.msg('我是有底线的!')
				} else {
					this.page2++;
					this.getlist();
				}
			}
			if (this.flag == 3) {
				if (this.page3 >= this.last_page3) {
					this.$wanlshop.msg('我是有底线的!')
				} else {
					this.page3++;
					this.getprintlist();
				}
			}
		},
		methods: {
			//选择城市
			getCitys(citys) {
				this.$store.commit('positionText', citys.name);
				this.$store.commit('lat', citys.lat);
				this.$store.commit('lng', citys.lng);
				let selectedAddress = citys.mergename?citys.mergename[2]:citys.name;
				this.$store.commit('selectedAddress', selectedAddress);
				this.$rangeObj(selectedAddress);
			},
			// 套系筛选列表
			getNavsList() {
				let that = this
				that.$request({
					url: 'wedding/worker_appointment_type',
					method: 'POST'
				}).then(res => {
					if (res.statusCode == 200) {
						res.data.data.unshift({
							name: "全部套系",
							id: 0
						})
						that.navsList = res.data.data;
					}
				})
			},
			onActive0(id) {
				this.classid0 = id;
				this.page0 = 1;
				this.status0 = 1;
				this.getListGoods();
			},
			onSort(index) {
				if (this.sortType0 == index) {
					this.order0 = !this.order0;
				}
				this.sortType0 = index;
				this.page0 = 1;
				this.status0 = 1;
				this.getListGoods();
			},
			getListGoods() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let latitude = uni.getStorageSync('location').latitude;
				let longitude = uni.getStorageSync('location').longitude;
				let that = this,
					data = {
						shop_cat_id: this.classid0,
						sort: this.sortType0 == 0 ? 'views' : this.sortType0 == 1 ?
							'updatetime' : this.sortType0 == 2 ? 'price' : 'comment',
						order: this.order0 ? "desc" : 'asc',
						page: this.page0,
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this
							.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
					}
				that.$request({
					url: 'Package/lists',
					method: 'POST',
					data,
				}).then(res => {
					that.last_page0 = res.data.data.last_page
					
					// that.goodsList = that.goodsList.concat(res.data.data.data)
					that.goodsList = that.page == 1 ? (res.data.data.data ? res.data.data.data : []) : that
						.goodsList
						.concat(res.data.data.data);
						
					uni.hideLoading()
				})
			},
			//店铺
			// 门店导航栏
			getNavsListStore() {
				let that = this
				that.$request({
					url: 'wedding/worker_appointment_type',
					method: 'POST'
				}).then(res => {
					if (res.statusCode == 200) {
						res.data.data.unshift({
							name: "全部门店",
							id: 502
						})
						that.storeNavList = res.data.data
					}
				})
			},
			onActive1(id) {
				this.classid1 = id == 502 ? '' : id;
				this.page1 = 1;
				this.getStoreData();
			},
			// 获取门店列表
			screenActive(ind) {
				if (this.sortType1 == ind) {
					this.order1 = !this.order1;
				}
				this.sortType1 = ind;
				this.page1 = 1;
				this.getStoreData();
			},
			getStoreData() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let latitude = uni.getStorageSync('location').latitude;
				let longitude = uni.getStorageSync('location').longitude;
				that.$request({
					url: 'shop/lists',
					data: {
						cat_id: this.classid1,
						search: '',
						sort: this.sortType1 == 0 ? 'id' : this.sortType1 == 1 ? 'sale' : this.sortType1 == 2 ?
							'distance' : 'like',
						is_photography: 1,
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this
							.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
						page: this.page1,
						order: this.order1 ? "desc" : 'asc',
						keyword:this.searchVal
					}
				}).then(res => {
					uni.hideLoading()
					if (this.page1 == 1) {
						this.storeList = res.data.data.data;
					} else {
						this.storeList.push(...res.data.data.data);
					}
					this.last_page1 = res.data.data.last_page;
				})
			},
			// 老师
			getlei() {
				this.$request({
					url: 'wedding/wedding_type',
					method: 'POST',
					data: {
						show_type: 3, //店铺作品风格这里，只需要显示摄影 风格
					}
				}).then(res => {
					this.shopNavlist = res.data.data.type;
				})
			},
			change1(e, index) {
				this.classid2 = e;
				this.page2 = 1;
				this.status2 = 1;
				this.getlist();
			},
			// 老师切换
			tabTeacher(index) {
				this.teacherType = index;
				this.page2 = 1;
				this.status2 = 1;
				this.getlist();
			},
			changesortType2(index) {
				if (this.sortType2 == index) {
					this.order2 = !this.order2;
				}
				this.sortType2 = index;
				this.page2 = 1;
				this.status2 = 1;
				this.getlist();
			},
			getlist() {
				let latitude = uni.getStorageSync('location').latitude;
				let longitude = uni.getStorageSync('location').longitude;
				this.$request({
					url: 'wedding/wedding_worker',
					method: 'POST',
					data: {
						type: this.teacherType,
						user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
						col: 0, //1 喜欢
						wedding_id: this.classid2, //摄影分类id
						order: this.order2 == 0 ? 'desc' : 'asc',
						sort: this.sortType2 == 0 ? 'id' : this.sortType2 == 1 ? 'num' : this.sortType2 == 2 ?
							'distance' : this.sortType2 == 3 ? 'work_year' : 'view',
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this
							.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
						page: this.page2,
						keyword:this.searchVal
					}
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page2 == 1) {
							this.shoplist = res.data.data.data;
						} else {
							this.shoplist.push(...res.data.data.data);
						}
						this.last_page2 = res.data.data.last_page;
						uni.hideLoading();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading();
					}
				})
			},
			// 样片
			change2(e) {
				this.classid3 = e;
				this.page3 = 1;
				this.status3 = 1;
				this.getprintlist();
			},
			selectThree3(e) {
				if (this.sortType3 == e) {
					this.order3 = !this.order3;
				}
				this.sortType3 = e;
				this.page3 = 1;
				this.status3 = 1;
				this.getprintlist();
			},
			getprintlist() {
				uni.showLoading({
					title: "加载中..."
				})
				let latitude = uni.getStorageSync('location').latitude;
				let longitude = uni.getStorageSync('location').longitude;
				this.$request({
					url: 'wedding/wedding_show',
					method: 'POST',
					data: {
						show_type: 3,
						page: this.page3,
						work_id: 0, //老师
						// shop_id: 4,
						type_p_id: this.classid3 ? this.classid3 : 0,
						type_id: 0,
						wedding_show: 0,
						wedding_type: 0,
						user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
						order: this.order3 == 0 ? 'desc' : 'asc',
						sort: this.sortType3 == 0 ? 'id' : this.sortType3 == 1 ? 'updatetime' : 'view',
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this
							.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
						page: this.page3

					},
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page3 == 1) {
							this.printList = res.data.data.data;
						} else {
							this.printList.push(res.data.data.data);
						}
						this.last_page3 = res.data.data.last_page;
						uni.hideLoading()
					} else {
						this.$wanlshop.msg(res.data.msg);
						uni.hideLoading()
					}
				})
			},
			//客片
			change3(e) {
				this.classid4 = e;
				this.page4 = 1;
				this.status4 = 1;
				this.getGuestlist();
			},
			selectThree4(e) {
				this.sortType4 = e;
				this.page4 = 1;
				this.status4 = 1;
				this.getGuestlist();
			},
			getGuestlist() {
				uni.showLoading({
					title: "加载中..."
				})
				let latitude = uni.getStorageSync('location').latitude;
				let longitude = uni.getStorageSync('location').longitude;
				this.$request({
					url: 'wedding/wedding_show',
					method: 'POST',
					data: {
						show_type: 3,
						page: this.page4,
						work_id: 0, //老师
						type_p_id: this.classid4 ? this.classid4 : 0,
						type_id: 0,
						wedding_show: 2,
						wedding_type: 0,
						user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
						sort: this.sortType4 == 0 ? 'id' : this.sortType4 == 1 ? 'updatetime' : 'view',
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this
							.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
					},
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page4 == 1) {
							this.guestList = res.data.data.data;
						} else {
							this.guestList.push(...res.data.data.data);
						}
						this.lastPage4 = res.data.data.last_page;
						uni.hideLoading()
					} else {
						this.$wanlshop.msg(res.data.msg);
						uni.hideLoading()
					}
				})
			},
			// 选中第一个分类
			selectBigtab: function(index) {
				this.searchVal = ''
				let that = this
				that.flag = index
				if (this.flag == 0) {
					this.page0 = 1;
					this.status0 = 1;
					this.getListGoods();
				} else if (that.flag == 1) {
					this.page1 = 1;
					this.getStoreData();
				} else if (that.flag == 2) {
					this.page2 = 1;
					this.status2 = 1;
					this.getlist();
				} else if (that.flag == 3) {
					this.page3 = 1;
					this.status3 = 1;
					this.getprintlist();
				} else if (that.flag == 4) {
					this.page4 = 1;
					this.status4 = 1;
					this.getGuestlist();
				}
				this.keyWords = undefined
			},
			goback() {
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
			onPhone(data) {
				uni.makePhoneCall({
					phoneNumber: data
				})
			},
			// 去评论
			goPinglun(id) {
				uni.navigateTo({
					url: '/pages/filePages/evaluate/evaluate?shopid=' + id
				})
			},
			// 老师列表
			goLick() {
				uni.navigateTo({
					url: '/pages/teacher/like'
				})
			},
			clearData(val) {
			},
			changeRange(e) {
				this.rangeIndex = e;
				if (this.flag == 0) {
					this.page0 = 1;
					this.status0 = 1;
					this.getListGoods();
				} else if (this.flag == 1) {
					this.page1 = 1;
					this.getStoreData();
				} else if (this.flag == 2) {
					this.page2 = 1;
					this.status2 = 1;
					this.getlist();
				} else if (this.flag == 3) {
					this.page3 = 1;
					this.status3 = 1;
					this.getprintlist();
				} else if (this.flag == 4) {
					this.page4 = 1;
					this.status4 = 1;
					this.getGuestlist();
				}
			},
			// 调取导航
			getOpenLoaction(latitude, longitude) {
				if (!latitude && !longitude) {
					uni.showToast({
						title: "当前店铺未开启定位！",
						icon: "none"
					})
					return false
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {

					},
					fail(error) {

					}
				});
			},
			// 搜索门店
			onSearch() {
				this.getStoreData()
			},
			// 跳转店铺详情
			onGoods(flag, id, name) {
				let shopDetail = {
					shopname: name,
					id: id,
					flag: flag
				}

				let that = this
				if (flag != 1) {
					uni.navigateTo({
						url: '../filePages/storePages/index'
					})
					that.$store.commit("getDataShop", shopDetail)

				} else {
					that.$store.commit("getDataShopname", shopDetail)
					uni.navigateTo({
						url: '/pages/store/goodsList'
					})
				}
			},
			// 控制分类开关
			onXianS() {
				this.show = !this.show
			},
			close() {
				this.show = false
			},
			// 店铺电话btn
			onPhone(data) {
				uni.makePhoneCall({
					phoneNumber: data
				})
			},
			// 点击地址
			onLocation() {
				uni.navigateTo({
					url: '/pages/filePages/onLocation/onLocation'
				})
			},
			// 去评论
			goPinglun(id) {
				uni.navigateTo({
					url: '/pages/filePages/evaluate/evaluate?shopid=' + id
				})
			},
			handelSearch() {
				let that = this
				if (that.flag == 1) {
					that.page1 = 1;
					that.getStoreData();
				} else if (that.flag == 2) {
					that.page2 = 1;
					that.status2 = 1;
					that.getlist();
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f2f3f7;
	}
</style>
<style scoped lang="scss">
	// 筛选弹窗
	.four_tab {
		width: 26rpx;
		height: 26rpx;
	}

	.fu_chuang {
		width: 750upx;
		height: 1624upx;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 99999;

		.c_fu_chuang {
			width: 686upx;
			background: #FFFFFF;
			border-radius: 24upx 24upx 24upx 24upx;
			margin-top: 382upx;

			.c_fu_txt_box {
				flex-wrap: wrap;
				padding-top: 34upx;
				padding-bottom: 8upx;

				.list_txt {
					margin-left: 46upx;
					margin-bottom: 30upx;

					.fu_txt {
						color: #333;
					}
				}
			}
		}
	}

	.tips_right {
		width: 6rpx;
		height: 12rpx;

	}

	// 第一分类样式
	.bigtab {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 156rpx;
		height: 156rpx;
		background: #fff;
		margin-top: 13rpx;
		margin-right: 6rpx;

		.type {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 26rpx;
			color: #6E6F71;
		}

		.active_font {
			font-family: 'PingFang SC';
			font-weight: 600;
			font-size: 28rpx;
			color: #333;
		}
	}

	// 第三分类样式
	.three_type {
		color: #999;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;

	}

	.active_three {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		color: #333333;
	}

	.active {
		box-shadow: #ccc 0px 0px 10px;
		border-radius: 10px;
		margin-top: 13rpx;
		z-index: 999;

	}

	// 摄影师切换卡样式
	.option {
		width: 100rpx;
		height: 44rpx;
		text-align: center;
		line-height: 44rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 10px;
		color: #666;
		background: #F6F6F6;
		border-radius: 3px;
	}

	.active_option {
		background-color: #333;
		color: #fff;
	}

	.xiding {
		position: fixed;
		z-index: 9999;
		left: 0rpx;
		top: 240rpx;
		background-color: #FFFFFF;

	}

	.store {
		.store_tips {
			margin-top: 10rpx;
			background: linear-gradient(90deg, #F4F5F9 0%, rgba(244, 245, 249, 0) 100%);
			border-radius: 12rpx;
			width: 638rpx;
			height: 52rpx;
			justify-content: space-between;
			align-items: center;
			padding-left: 10rpx;
			display: flex;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 20rpx;
			color: #999;

		}

		.list_bottom_box {
			background: #FFFFFF;
			border-radius: 40upx 40upx 0upx 0upx;
			margin-top: 24upx;
			overflow: hidden;

			.bottom_seater {
				margin-top: 40upx;
				padding-left: 66upx;
				padding-right: 66upx;
				margin-bottom: 40upx;

				.bot_list_txt {
					font-family: PingFang SC-Heavy, PingFang SC;
					color: #999999;
					margin-left: 126upx;
				}

				.bot_list_txt:nth-child(1) {
					margin-left: 0;
				}

				.bot_list_txt_active {
					font-family: PingFang SC-Heavy, PingFang SC;
					color: #333333;
				}
			}

		}

		.list_max_box {
			padding: 30upx 0 30upx 0;
			padding: 0 0 30upx 0;
			padding-top: 20rpx;
			.bot_list_goods_box {
				width: 666upx;
				height: 238upx;
				background: #fff;
				border-radius: 16upx 16upx 16upx 16upx;
				margin: 20upx auto;
				padding: 20upx 0 0 20upx;

				.portrait {
					width: 160upx;
					height: 160upx;
					border-radius: 16upx 16upx 16upx 16upx;
					overflow: hidden;
				}

				.right_txtbox {
					margin-left: 28upx;

					.store_name {
						font-family: PingFang SC-Heavy, PingFang SC;
						color: #333333;
						margin-top: 8upx;
					}

					.goods_num_fangke_num {
						color: #666666;
						margin-top: 20upx;
					}

					.xinxi_phone_img {
						margin-top: 20upx;

						.xinxi_img {
							width: 54upx;
							height: 54upx;
						}

						.phone_img {
							width: 54upx;
							height: 54upx;
							margin-left: 56upx;
						}

						.guanzhu_btn {
							width: 116upx;
							height: 48upx;
							border-radius: 8upx 8upx 8upx 8upx;
							border: 2upx solid #EB8787;
							color: #EB8787;
							position: absolute;
							margin-top: -24rpx;
							right: 56rpx;
							line-height: 48upx;

						}

						.guanzhu_btn_active {
							width: 116upx;
							height: 48upx;
							border-radius: 8upx 8upx 8upx 8upx;
							background-color: #EB8787;
							color: #fff;
							position: absolute;
							margin-top: -24rpx;
							right: 56rpx;
							line-height: 48upx;
						}
					}
				}

				.bottom_dingwei {
					margin-top: 14upx;

					.operate {
						width: 152rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: -20rpx;

						.comment {
							height: 60rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							div {
								font-family: 'PingFang SC';
								font-style: normal;
								font-weight: 400;
								font-size: 18rpx;
								color: #333333;
							}
						}

						.line {
							width: 2rpx;
							height: 20rpx;
							background-color: #D8D8D8;
						}

						.phone {
							height: 60rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							align-items: center;

							div {
								font-family: 'PingFang SC';
								font-style: normal;
								font-weight: 400;
								font-size: 18rpx;
								color: #333333;
							}
						}
					}

					.weizhi_img {
						width: 26upx;
						height: 26upx;
					}

					.dingwei_txt {
						color: #E29D48;
						margin-top: 4upx;
						margin-left: 8upx;
						width: 240rpx;

					}
				}
			}

			.bot_list_goods_box:first-child {
				margin-top: 0upx;
			}

			.no_list {
				text-align: center;
				margin-top: 60%;
			}
		}



		.header_back {
			height: 296upx;
			position: absolute;
		}

		.title {
			font-size: 32upx;
			color: #FFFFFF;
			text-align: center;
		}

		.header_box {
			position: relative;
			z-index: 99;

			.uni-input {
				width: 608upx;
				height: 68upx;
				background: #FFFFFF;
				border-radius: 8upx 8upx 8upx 8upx;
				margin: 48upx auto;
				margin-bottom: 0;
				padding-left: 78upx;
				color: #CCCCCC;
			}

			.ipt_sousuo {
				width: 40upx;
				height: 40upx;
				position: relative;
				top: -52upx;
				left: 56upx;
			}

			.nav_list {
				margin-top: -16upx;
				padding-left: 36upx;

				.nav_list_box {
					width: 630upx;

					.scroll-view_H {
						white-space: nowrap;

						.scroll-view-item_H {
							display: inline-block;
							margin-left: 58upx;

							.nav_list_txt {
								width: 104upx;
								height: 36upx;
								font-size: 26upx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
							}

							.nav_txt_active {
								font-size: 26upx;
								font-family: PingFang SC-Heavy, PingFang SC;
								font-weight: 800;
								color: #FFFFFF;
							}

							.nav_list_botxian {
								width: 46upx;
								border-bottom: 6upx solid #FFFFFF;
								margin: 6upx auto;
							}
						}

						.scroll-view-item_H:nth-child(1) {
							margin-left: 0rpx;
						}
					}
				}

				.fenlei_box {
					width: 34upx;
					height: 34upx;
					margin-right: 30rpx;
					margin-top: 6rpx;
				}
			}
		}
	}

	.xiding {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
	}

	.teacher_box {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		padding-top: 20rpx;
		.t_item {
			width: 336rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-right: 22rpx;
			overflow: hidden;
			margin-bottom: 20rpx;

			.item_top {
				width: 336rpx;
				height: 336rpx;
				background-color: #ccc;
			}

			.item_bottom {
				width: 312rpx;
				height: 94rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				padding: 20rpx 12rpx;

				.title {
					display: flex;
					justify-content: space-between;

					.title_l {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 600;
						font-size: 24rpx;
						color: #333333;

					}

					.star {
						display: flex;
						align-items: center;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;

						.star_l {
							width: 30rpx;
							height: 30rpx;
							background: url() no-repeat center;
							background-size: 100%;
							display: inline-block;
							vertical-align: middle;
							margin-right: 8rpx;
						}
					}

					.star_active {
						display: flex;
						align-items: center;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 20rpx;
						color: #EBBE87;

						.star_l_active {
							display: inline-block;
							vertical-align: middle;
							margin-right: 8upx;
							width: 30upx;
							height: 30upx;
							background: url(/static/teacher/dians.png)no-repeat center;
							background-size: 100%;
						}
					}

				}

				.tips {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 10px;
					color: #666;
					margin-top: 12rpx;

					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;


				}
			}

		}
	}

	.poskl {
		width: 90upx;
		height: 90upx;
		background: #303031;
		position: fixed;
		right: 32upx;
		bottom: 300upx;
		text-align: center;
		color: #EBEBEB;
		font-size: 20upx;
		border-radius: 45upx;
		border-top: 1upx solid transparent;

		.xin {
			width: 40upx;
			height: 40upx;
			background: url(../../static/teacher/xin.png)no-repeat center;
			background-size: 100%;
			margin: 0 auto;
			margin-top: 10upx;
		}
	}
</style>
